<script setup>
import { v4 as uuidv4 } from 'uuid'
const { proxy } = getCurrentInstance()
const emit = defineEmits(['submitParams'])
const dialogFormVisible = ref(false)
const defaultForm = {
  fileType: '',
  pneumaticForm: [{
    id: uuidv4(),
    pneumaticKey: '',
    pneumaticValue: ''
  }]
}
const form = reactive({
  ...defaultForm
})
const formLabelWidth = '80px'
const ruleFormRef = ref()
const fileTypeArr = ref([
  {
    value: 'txt',
    label: 'txt'
  },
  {
    value: 'dat',
    label: 'dat'
  },
  {
    value: 'xlsx',
    label: 'xlsx'
  }
])
const { sys_pneumatic_column } = proxy.useDict('sys_pneumatic_column')
const show = () => {
  dialogFormVisible.value = true
}
const addBindForm = () => {
  form.pneumaticForm.push({
    id: uuidv4(),
    pneumaticKey: '',
    pneumaticValue: ''
  })
}
const deleteBind = (id) => {
  form.pneumaticForm = form.pneumaticForm.filter(item => item.id !== id)
}
const handleSubmit = async () => {
  console.log(form)
  await proxy.$refs.pneumaticForm.validate((valid, fields) => {
    if (valid) {
      emit('submitParams', form)
    } else {
      console.log('error submit!', fields)
    }
  })
}
const closeDlg = () => {
  /* Object.assign(form, {
    ...defaultForm,
    pneumaticForm: [{
      id: uuidv4(), // Ensure a new UUID is generated for the new form entry
      pneumaticKey: '',
      pneumaticValue: ''
    }]
  }) */
  dialogFormVisible.value = false
}
defineExpose({
  show,
  closeDlg
})
</script>

<template>
  <el-dialog
    v-model="dialogFormVisible"
    title="全局检索"
    width="500"
  >
    <div class="add-box">
      <el-button
        icon="Plus"
        type="primary"
        text
        @click="addBindForm"
      >
        新增参数
      </el-button>
    </div>
    <el-form
      :model="form"
      ref="pneumaticForm"
    >
      <el-form-item
        label="文件类型"
        :label-width="formLabelWidth"
        prop="fileType"
        :rules="{
          required: true,
          message: '请选择文件类型',
          trigger: 'blur'
        }"
      >
        <el-select
          v-model="form.fileType"
          placeholder="请选择"
        >
          <el-option
            v-for="item in fileTypeArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!--      <el-divider content-position="left">
        <span style="color: #409EFF; font-size: 20px">
          新增参数 {{ index1 + 1 }}
          <el-button
            type="text"
            @click="deleteBind(item.id)"
          >删除</el-button>
        </span>
      </el-divider>-->
      <div
        v-for="(item, index) in form.pneumaticForm"
        :key="item.id"
      >
        <el-divider content-position="left">
          <span style="color: #409EFF; font-size: 16px">
            参数 {{ index + 1 }}
            <el-button
              v-if="index > 0"
              type="danger"
              text
              @click="deleteBind(item.id)"
            >删除</el-button>
          </span>
        </el-divider>
        <el-form-item
          label="参数名称"
          :label-width="formLabelWidth"
          :prop="'pneumaticForm.' + index + '.pneumaticKey'"
          :rules="{
            required: true,
            message: '请选择参数名称',
            trigger: 'change'
          }"
        >
          <el-select
            v-model="item.pneumaticKey"
            placeholder="请选择"
          >
            <el-option
              v-for="pneumaticKey in sys_pneumatic_column"
              :key="pneumaticKey.dictCode"
              :label="pneumaticKey.label"
              :value="pneumaticKey.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="参数值"
          :label-width="formLabelWidth"
          :prop="'pneumaticForm.' + index + '.pneumaticValue'"
          :rules="{
            required: true,
            message: '请输入参数值',
            trigger: 'blur'
          }"
        >
          <el-input
            v-model="item.pneumaticValue"
            placeholder="请输入"
          />
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="handleSubmit"
        >
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.add-box {
  margin-bottom: 16px;
}
</style>
